<template>
  <div class="main-container">
    <div style="width: 50%;" v-for="(i,index) in seriesDataList" :key="index">
      <SmtChart :legendList='i.legendList' :title='i.title' :seriesData='i.seriesData' :xAxisData="i.xAxisData" :height="'300px'"/>
    </div>
  </div>
</template>

<script>
import SmtChart from '@views/dashboard/components/SmtChart'

export default {
  name: 'ProductionDepartment',// 生产部
  components:{
    SmtChart
  },
  props:{
    activeCode:{
      type:String,
      default:''
    },
  },
  computed: {
    begindate () {
      return this.$store.state.app.begindate;　　//需要监听的数据
    },
    enddate () {
      return this.$store.state.app.enddate;　　//需要监听的数据
    },
    kjtext () {
      return this.$store.state.app.kjtext;　　//需要监听的数据
    },
    reSearch(){
      return this.$store.state.app.reSearch;　　//需要监听的数据
    }
  },
  data(){
    return {
      seriesDataList:[],
    }
  },
  watch:{
    activeCode:{
      handler(newVal,oldVal){
        this.seriesDataList = []
        this.getPartData()
      }
    },
    begindate:{
      handler(newVal,oldVal){
        console.log('begindate',newVal)
        this.getChartData()
      }
    },
    enddate:{
      handler(newVal,oldVal){
        console.log('enddate',newVal)
      }
    },
    kjtext:{
      handler(newVal,oldVal){
        console.log('kjtext',newVal)
        this.getChartData()
      }
    },
    reSearch:{
      handler(newVal,oldVal){
        console.log('reSearch',newVal)
        this.getChartData()
      }
    }
  },
  methods:{
    getPartData(){
      this.$http.get('/inspect/reportapi/getDeptPicLoss',{
        params:{
          line:this.activeCode,
          dept:'生产部',
          begindate:this.begindate,
          enddate:this.enddate,
          kjtext:this.$store.state.app.kjtext,
          linecode:this.$store.state.app.linecode,
          procode:this.$store.state.app.procode,
        }
      }).then(res=>{
        if (res.success){
          res.result.forEach((item,index)=>{
            let newVal = item
            let obj = {
              title:'',
              legendList:[],
              seriesData:[],
              xAxisData:[],
            }
            let lengend = []
            let series = []
            obj.title = newVal.name
            lengend.push(newVal.barname)
            lengend.push(newVal.line1name)
            lengend.push(newVal.line2name)
            obj.legendList = lengend
            series.push({
              name: newVal.barname,
              type: 'bar',
              data: newVal.bar,
              barMaxWidth:30,
            })
            series.push({
              name: newVal.line1name,
              type: 'line',
              data: newVal.line1,
              yAxisIndex:1
            })
            series.push({
              name: newVal.line2name,
              type: 'line',
              data: newVal.line2,
              yAxisIndex:1
            })
            obj.seriesData = series
            obj.xAxisData = newVal.xname
            this.seriesDataList.push(obj)
          })
        }else{
          this.$message.error(res.message)
        }
      });
    }
  },
  mounted() {
    this.getPartData()
  }
}
</script>

<style scoped lang="less">
  .main-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
  }

</style>